<template>
	<view class="container">
		<view class="blue-background"></view>
	
		
		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 商户信息卡片 -->
			<view class="info-card">
				<view class="info-item">
					<text class="label">负责人:</text>
					<text class="value">张大美</text>
				</view>
				<view class="info-item">
					<text class="label">身份证号码:</text>
					<text class="value">40365236541232563</text>
				</view>
				<view class="info-item">
					<text class="label">手机号:</text>
					<text class="value">18893039203</text>
				</view>
				<view class="info-item">
					<text class="label">店名:</text>
					<text class="value">大美汽修店</text>
				</view>
				<view class="info-item">
					<text class="label">工商营业执照号码:</text>
					<text class="value">4252336467474764646</text>
				</view>
					<view class="info-item">
						<text class="label">经营区域:</text>
						<text class="value">焦作市山阳区</text>
					</view>
				<view class="info-item">
					<text class="label">地址:</text>
					<text class="value">山阳区迎宾路32号</text>
				</view>
			</view>
			
			<!-- 商家简介卡片 -->
			<view class="intro-card">
				<view class="card-title">商家简介</view>
				<view class="intro-content">
					这里是简单的商家介绍这里是简单的商家介绍,这里是简单的商家介绍这里是简单的商家介绍,这里是简单的商家介绍这里是简单的这里是简单的商家介绍商家介绍,
				</view>
			</view>
			
			<!-- 身份证正反面照片卡片 -->
			<view class="photo-card">
				<view class="card-title">身份证正反面照片</view>
				<view class="photo-container">
					<view class="photo-item">
						<image class="id-photo" src="/static/images/xtx/2fea48638742bc0be4d6d9c690e47853.png" mode="aspectFit"></image>
					</view>
					<view class="photo-item">
						<image class="id-photo" src="/static/images/xtx/cc07152b4a4efd345cd7c9bdffddfca1.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			
			<!-- 营业执照卡片 -->
			<view class="photo-card">
				<view class="card-title">营业执照</view>
				<view class="license-container">
					<image class="license-photo" src="/static/images/xtx/f9d5bbeca0344d1e62c2a903c7965232.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 门店照片卡片 -->
			<view class="photo-card">
				<view class="card-title">门店照片</view>
				<view class="store-container">
					<image class="store-photo" src="/static/images/xtx/73d8c12a7f90c12184af87fea40ac32c.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
				<!-- 底部修改按钮 -->
				<view class="modify-button">
					<button class="modify-btn" @click="goToUpdate">修改</button>
				</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goToUpdate() {
				uni.navigateTo({
					url: '/pages/seller_information/update/update'
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		position: relative;
	}
	
	/* 蓝色背景区域 */
	.blue-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background: linear-gradient(120deg, #3385fd 0%, #3385fd 100%);
	}
	
	/* 主内容区域样式 */
	.main-content {
		position: absolute;
		width: 690rpx;
		top: 1rpx;
		bottom: 140rpx;
		z-index: 2;
		padding: 30rpx;
		overflow-y: auto;
	}
	
	/* 商户信息卡片样式 */
	.info-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.info-item:last-child {
		margin-bottom: 0;
	}
	
	.label {
		color: #333;
		font-size: 28rpx;
		flex: 1;
	}
	
	.value {
		color: #333;
		font-size: 28rpx;
		flex: 2;
		text-align: right;
	}
	
	/* 通用卡片样式 */
	.intro-card, .photo-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.card-title {
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	
	.intro-content {
		color: #666;
		font-size: 26rpx;
		line-height: 1.6;
	}
	
	/* 照片容器样式 */
	.photo-container {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}
	
	.photo-item {
		position: relative;
	}
	
	.id-photo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
		border: 2rpx solid #e0e0e0;
	}
	
	.license-container, .store-container {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}
	
	.license-photo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
		border: 2rpx solid #e0e0e0;
	}
	
	.store-photo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
		border: 2rpx solid #e0e0e0;
	}
	
	/* 底部修改按钮样式 */
	.modify-button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx;
		background-color: white;
		border-top: 1rpx solid #e0e0e0;
		z-index: 3;
	}
	
	.modify-btn {
		width: 100%;
		height: 88rpx;
		background-color: #007AFF;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 44rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.modify-btn:active {
		background-color: #0056CC;
	}
</style>